<script setup>
import { reactive, ref } from "vue";
import request from '@/api/request'
import { useRouter } from "vue-router"
import { Search } from '@element-plus/icons-vue'
let router = useRouter();

let purchaseOrder = ref({})
let formRef = ref()
let vendor=ref([])
let warehouse=ref([])
let productionPlan=ref([])
let purchaseOrders=ref([])

let isVisible = ref(false)
let title = ref("")
let data = ref({})
let User=ref([])

let page = ref({
    current: 1,
    size: 10000,
    total: 0,
    records:[]
})

let toRemove = () => {
    request({
        //删除订单
        url:"purchaseOrder",
        method:"delete",
        data:purchaseOrders.value
    }).then(res=>{
        location()
    })
}
//修改
let toUpdate = (row) => {
    title.value = "修改"
    isVisible.value = true;
    data.value = row;

    router.push("/procurement/purchaseOrder/update");
}

let refTanle = () => {
    isVisible.value = false;
    location();
}
//重置
let shuaxin = () => {
    formRef.value.resetFields();
}
//新增
let toInsert = () => {
    title.value = "申请采购";
    isVisible.value = true;
    router.push("/procurement/purchaseOrder/insert");
}

//选择框事件
let fuxuankuang = (a) => {
    purchaseOrders.value = a
}

let location = () => {
console.log(purchaseOrder.value);

    request({
        //查询采购订单
        url:"/purchaseOrder",
        method:"get",
        params:{
            ...purchaseOrder.value}
        
    }).then(res=>{
        page.value=res.data
    })

    request({
        //查询员工
            url:"/system/user/list",
            method:"post",
            data:{
                current:1,
                size:1000
            }
        }).then(res=>{
            User.value=res.data.records
        })
}
//搜索框查询
let locationSousuo=()=>{
    request({
        //查询供应商
        url:"/vendor",
        method:"get",
        data:{
            current:1,
            size:1000
        }
        
    }).then(res=>{
        vendor.value=res.data.records;
    })

     request({
        //查询仓库
        url:"/warehouse",
        method:"get",
        params:{
            current:page.value.current,
            size:page.value.size
    }
    }).then(res=>{
        warehouse.value=res.data.date
    })
    request({
        //查询生产计划
        url:"/production/plan/page",
        method:"get",
        params:{
            current:1,
            size:1000
    }
    }).then(res=>{
        productionPlan.value=res.data.records;
    })
}
locationSousuo()
location();

let isUpdate=(row)=>{

    if(row=="申请中"){
        return true
    }
    return false;
}

</script>

<template>
    <div>
        <el-card>
            <template #header>
                <el-form ref="formRef" inline :model="purchaseOrder" style="display: flex;justify-content: start;"
                    class="card_wrap">
                    <el-form-item label="采购单号" prop="purchaseOrderId" class="c_item">
                        <el-input v-model="purchaseOrder.purchaseOrderId" class="sousuo"
                            placeholder="请输入单号"></el-input>
                    </el-form-item>
                    <el-form-item label="采购单名称" prop="purchaseOrderName" class="c_item">
                        <el-input v-model="purchaseOrder.purchaseOrderName" class="sousuo"
                            placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="生产计划订单" prop="purchaseOrderProductionPlanningId" class="c_item">
                        <el-select class="sousuo" v-model="purchaseOrder.purchaseOrderProductionPlanningId" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in productionPlan" :label="item.planName" :value="item.planId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单签订时间" prop="purchaseOrderDateOfSigning" class="c_item">
                        <el-date-picker v-model="purchaseOrder.purchaseOrderDateOfSigning" type="date" value-format="YYYY-MM-DD"
                            placeholder="选择日期时间" @change="location">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="交货时间" prop="purchaseOrderDeliveryDate" class="c_item">
                        <el-date-picker v-model="purchaseOrder.purchaseOrderDeliveryDate" type="date" value-format="YYYY-MM-DD"
                            placeholder="选择日期时间" @change="location">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="采购员工" prop="purchaseOrderEmployeeId" class="c_item">
                        <el-select class="sousuo" v-model="purchaseOrder.purchaseOrderEmployeeId" @change="location">
                            <el-option label="全部" value="">
                                </el-option>
                            <el-option v-for="item in User" :label="item.nickname" :value="item.id">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商" prop="purchaseOrderVendorId" class="c_item">
                        <el-select class="sousuo" v-model="purchaseOrder.purchaseOrderVendorId" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in vendor" :label="item.vendorName" :value="item.vendorId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预入库仓库" prop="purchaseOrderInboundWarehouse" class="c_item">
                        <el-select class="sousuo" v-model="purchaseOrder.purchaseOrderInboundWarehouse" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in warehouse" :label="item.warehouseName" :value="item.warehouseId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="情况" prop="purchaseOrderState" class="c_item">
                        <el-select class="sousuo" v-model="purchaseOrder.purchaseOrderState" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option label="申请中" value="申请中">
                            </el-option>
                            <el-option label="驳回" value="驳回">
                            </el-option>
                            <el-option label="部分退回" value="部分退回">
                            </el-option>
                            <el-option label="正在采购" value="正在采购">
                            </el-option>
                            <el-option label="采购完成" value="采购完成">
                            </el-option>
                        </el-select>
                    </el-form-item>



                    <el-form-item class="c_item">
                        <template #default>
                            <el-button type="primary" @click="location">搜索</el-button>
                            <el-button type="info" :plain=true @click="shuaxin">重置</el-button>
                            <p></p>
                        </template>
                    </el-form-item>
                </el-form>

                <div style="margin: 20px 0px;">
                    <el-button @click="toInsert" type="primary" :plain="true">+添加</el-button>
                    <el-button type="danger" :plain=true @click="toRemove" style="border:0px"
                        :disabled="!purchaseOrders.length">删除</el-button>
                </div>

                <el-table :data="page.records" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"   @selection-change="fuxuankuang" show-overflow-tooltip>
                    <el-table-column type="selection" width="55"/>
                    <el-table-column type="expand">
                        <template  #default="props">
                            <div m="4" style="margin: 0 120px;padding: 10px 0;" v-if="props.row.purchaseDetailsList">
                                <el-table :data="props.row.purchaseDetailsList" :border="false" style="border:0px" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" show-overflow-tooltip>
                                    <el-table-column prop="purchaseDetailsId" label="采购明细编码" width="110px;"/>
                                    <el-table-column prop="purchaseDetailsProductsId" label="产品编码" width="100px;"/>
                                    <el-table-column prop="material.materialName" label="产品名称" width="100px;"/>
                                    <el-table-column prop="purchaseDetailsSupplierPricesId" label="供应商价格编码" width="130px;"/>
                                    <el-table-column prop="purchaseDetailsQuantityPurchased" label="采购数量" width="110px;"/>
                                    <el-table-column prop="purchaseDetailsOriginalPrice" label="采购原价合价" width="110px;"/>
                                    <el-table-column prop="purchaseDetailsActualPrice" label="采购实际合价" width="130px;"/>
                                    <el-table-column prop="purchaseDetailsNoActualPrice" label="实际采购价（不含税）" width="170px;"/>
                                    <el-table-column prop="purchaseDetailsPurchaseOrderId" label="采购订单编码" width="130px;"/>、
                                </el-table>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="purchaseOrderId" label="采购单编码" width="100px;" />
                    <el-table-column prop="purchaseOrderName" label="采购订单名称" width="120px;"/>
                    <el-table-column prop="purchaseOrderProductionPlanningId" label="生产计划编码" width="120px;"/>
                    <el-table-column prop="productionPlan.planName" label="生产计划名称" width="150px;"/>
                    <el-table-column prop="purchaseOrderDateOfSigning" label="订单签订时间" width="110px;"/>
                    <el-table-column prop="purchaseOrderDeliveryDate" label="交货时间" width="100px;" />
                    <el-table-column prop="nickname1" label="采购员工编码" width="120px;"/>
                    <el-table-column prop="purchaseOrderVendorId" label="供应商编码" width="130px;"/>
                    <el-table-column prop="vendor.vendorName" label="供应商名称" width="130px;"/>
                    <el-table-column prop="warehouse.warehouseName" label="预入库仓库" width="130px;"/>
                    <el-table-column prop="purchaseOrderTotalQuantity" label="采购总数量" width="140px;"/>
                    <el-table-column prop="purchaseOrderPrice" label="采购原价" width="100px;"/>
                    <el-table-column prop="purchaseOrderDiscountAmount" label="优惠金额" width="100px;"/>
                    <el-table-column prop="purchaseOrderDiscountRate" label="折扣率" width="80px;"/>
                    <el-table-column prop="purchaseOrderPreferentialPrice" label="优惠后采购金额" width="130px;"/>
                    <el-table-column prop="purchaseOrderTheAmountIsCapitalized" label="金额大写" width="100px;"/>
                    <el-table-column prop="purchaseOrderNoPreferentialPrice" label="优惠后采购金额（不含税）" width="200px;"/>
                    <el-table-column prop="purchaseOrderState" label="状态" width="100px;"/>
                    <el-table-column prop="nickname" label="审批人" width="100px;"/>
                    <el-table-column prop="purchaseOrderAddress" label="地址" width="100px;"/>
                    <el-table-column prop="purchaseOrderFulladdress" label="详细地址" width="100px;"/>
                    <el-table-column label="操作" width="120px;" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" v-if="isUpdate(scope.row.purchaseOrderState)" @click="toUpdate(scope.row)" :row="scope.row">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                    <router-view @ref-table="refTanle" :data="data">
                    </router-view>
                </el-dialog>
            </template>

        </el-card>

    </div>
</template>

<style scoped>
.sousuo {
    width: 200px;
    /* margin-right: 100px; */
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
[m='4'] :deep(.el-table){
    --el-table-border-color: transparent;
}
:deep(.el-tooltip):hover{
    cursor: pointer;
}
</style>